<template>
    <div class="edit">
        <span class="back iconfont" @click="back">添加收货地址</span>
        <van-address-edit
            :area-list="areaList"
            :show-postal="false"
            show-delete
            show-search-result
            :show-set-default="true"
            :address-info="peopleList"
            :search-result="searchResult"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            class="address"
        />
    </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { mapMutations, mapGetters } from "vuex";
// import _ from "lodash";
export default {
    data() {
        return {
            // 地区列表
            areaList,
            // 详细地址搜索结果
            searchResult: [],
            peopleList: {
                addressDetail: "东方通信大厦",
                isDefault: false,
                name: "张三",
                tel: "13000000000",
                // postalCode: 535200,
                id: 1,
            },
            newId: 0,
        };
    },
    props: {
        currcount: {
            type: Number,
            default: null,
        },
    },
    computed: {
        ...mapGetters(["mycity"]),
    },
    methods: {
        ...mapMutations(["setcity", "removeOneCity"]),
        // 保存地址
        onSave(item) {
            console.log("保存地址拿到的数据", item);

            // 将数据存储到vuex中
            let citys = {
                address: item.addressDetail + item.city + item.county,
                id: this.mycity.length,
                areaCode: item.areaCode,
                isDefault: item.isDefault,
                name: item.name,
                tel: item.tel,
            };
            // 将数据存储到vuex中
            this.setcity(citys);
            this.$toast("保存地址成功");
            this.back();

            // 存储地址到浏览器缓存中
            let ress = localStorage.getItem("address");
            if (!ress) {
                ress = [];
            } else {
                ress = JSON.parse(ress);
                console.log(ress);
            }
            ress.unshift(citys);
            // 去重 未成功
            localStorage.setItem("address", JSON.stringify(ress));
        },
        // 删除地址
        onDelete() {
            // 删除vuex中的数据
            this.$toast("删除成功");
            this.removeOneCity(this.currcount);
            this.back();

            // 删除浏览器中的缓存地址
            let address = localStorage.getItem("address");
            if (!address) return;
            address = JSON.parse(address);
            address.splice(this.currcount, 1);
            localStorage.setItem("address", JSON.stringify(address));
        },

        // 返回上一个界面
        back() {
            this.$emit("back", false);
        },

        getLocaltesite() {
            if (!this.currcount) return;
            // 修改地址,拿到vuex的数据
            this.peopleList = this.mycity[this.currcount];
            console.log(this.mycity[this.currcount]);
            this.peopleList.addressDetail = this.mycity[this.currcount].address;
        },
    },
    created() {
        console.log("拿到传过来的索引", this.currcount);
        this.getLocaltesite();
    },
};
</script>

<style lang="scss" scoped>
.back {
    font-size: 14px;
    position: absolute;
    left: 10%;
    top: 1%;
    z-index: 99;
    color: #ccc;
    position: relative;
    &::before {
        content: "\e61a";
        width: 40px;
        height: 40px;
        font-size: 16px;
        position: absolute;
        top: 0;
        left: -20%;
    }
}
.address {
    margin-top: 0px;
}
</style>
